<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'register.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="Css/register.css">
	<script  src="Js/jquery-3.4.1.min.js" ></script>

  </head>
  
  <body>
  <script   type="text/javascript" >
     $(".box").css("backgroundColor","red");
 function Reset(){
  
document.getElementById("UserName").value="";
document.getElementById("PassWord").value="";
document.getElementById("RePassWord").value="";
document.getElementById("Select").value="个人用户";
 document.getElementById("UserExist").style.display="none"
 document.getElementById("PassWordPool").style.display="none"
 document.getElementById("PassWordTwice").style.display="none"
     }
  function PassWordCheck(){
var UserName=document.getElementById("UserName");
var PassWord=document.getElementById("PassWord");
var RePassWord=document.getElementById("RePassWord");
var Select=document.getElementById("Select");
      }
function UserNameCheck(){
var UserName=document.getElementById("UserName");
var PassWord=document.getElementById("PassWord");
var RePassWord=document.getElementById("RePassWord");
var Select=document.getElementById("Select");
var username=document.getElementById("UserName").value;
 $.ajax({
            type: "post", 
            url: "FindUserAction", 
            data: { 
                "UserName": username, 
            },
             success: function(res) { // 成功调用的回调函数
               if(res=="1"){
                  document.getElementById("UserExist").style.display="block";//(与show()方法效果相同)
               }else if(res=="2"){
                document.getElementById("UserExist").style.display="block";
                document.getElementById("UserExist").innerHTML="请输入账号";
               }else{
                document.getElementById("UserExist").style.display="block";
                document.getElementById("UserExist").innerHTML="账号可用";
               }
            },
            error: function() { // 调用失败
                alert("ajax出错，未能成功访问路径");
            }
        })
      }
</script>
  
 <div class="box">
        <h2>医伯乐招聘网站</h2>
  <form action="RegisterAction" method="post">
    <div class="inputBox">
      <input type="text" id="UserName" name="UserName" required="" onblur="UserNameCheck()">
      <label>账号</label>
    </div>
     <div  id="UserExist"style="color:#fff;position: absolute;left: 50%;transform: translate(-50%,-100%);display:none">账号已被占用！</div>
    <div class="inputBox">
		<input type="password" id="PassWord" name="PassWord" required="">
		<label>密码</label>
    </div>
    		<div id="PassWordPool"style="color:#fff;position: absolute;left: 50%;transform: translate(-50%,-100%);display:none">密码由6位以上字母和数字组成！</div>
    <div class="inputBox">
		<input type="password" id="RePassWord" name="RePassWord" required=""  onblur="PassWordCheck()">
		<label>确认</label>
    </div>
    	<div id="PassWordTwice"style="color:#fff;position: absolute;left: 50%;transform: translate(-50%,-100%);display:none">两次输入密码不同！</div>
       <div class="inputBox">
		<select name="Select" id="Select">
		<option  class="option">个人用户
		<option class="option">企业用户
		</select>
    </div>
    
<input type="submit"  value="注册" > 
<input type="button"  value="重置"  onclick="Reset()"> 
 
	  </form>
	</div>
  </body>
</html>
